<template>
    <div class="customer_export">
      <div class="nav">
         <Breadcrumb separator=">">
            <BreadcrumbItem to="/customer/CustomerExport">客户导出</BreadcrumbItem>
            <BreadcrumbItem to="customer/CustomerExport">导出列表</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="table">
         <Table border :columns="columns7" :data="data6" ref="table"></Table>
      </div>
      <Row type="flex" justify="center" class="code-row-bg">
        <Col style="margin-top:2vh;">
          <Page :id="pageId" show-total :total="total" :page-size="pageSize" @on-change="pageable" show-sizer show-elevator></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 2vh;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
        </Col>
      </Row>
    </div>
</template>
<script>
export default {
  name: "CustomerExport",
  data() {
    return {
      pageId:"targetPage",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      columns7: [
        {
          title: "分组名称",
          key: "group_name",
          align: "center"
        },
        {
          title: "状态",
          key: "status",
          align: "center"
        },
        {
          title: "总客户数",
          key: "customer_total",
          align: "center"
        },
        {
          title: "导出人",
          key: "exporter",
          align: "center"
        },
        {
          title: "上传时间",
          key: "upTime",
          sortable: true,
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    icon:"ios-download-outline" 
                  },
                  on: {
                    click: () => {
                      this.exportData();
                    }
                  }
                },
                "下载文件"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          group_name: "RFM购物属性分组",
          status: "导出成功",
          customer_total: "42424212",
          exporter: "sugus",
          upTime: "2018-08-06"
        },
        {
          group_name: "RFM购物属性分组",
          status: "导出成功",
          customer_total: "42424212",
          exporter: "sugus",
          upTime: "2018-08-10"
        },
        {
          group_name: "RFM购物属性分组",
          status: "导出成功",
          customer_total: "42424212",
          exporter: "John",
          upTime: "2018-08-16"
        },
        {
          group_name: "RFM购物属性分组",
          status: "导出成功",
          customer_total: "42424212",
          exporter: "sugus",
          upTime: "2018-08-26"
        },
      ]
    };
  },
  methods: {
    exportData() {
      this.$refs.table.exportCsv({
          filename: "客户分组数据"
        });
    },
    pageable(current) {
        this.pageNum = current;
        // this.fetchQuestionList();
    },
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.customer_export {
  height: 100%;
  @include container_global;
  background-color: #f3f7ff;
  .table {
    margin-top: 2vh;
  }
}
</style>
